<template>
	<view class="add_con">
		<view class="top_con">
			<view class="title">用户档案</view>
			<view class="remark">
				<image src="/static/images/title_icon.png"></image>
				遵循医疗法规要求，需如实填写患者真实姓名
			</view>
		</view>
		<view class="userInfo_con">
			<view class="guid">
				<view class="left">
					<span>*</span>患者姓名
				</view>
				<view class="input">
					<u-input border="surround" type="text" v-model="form.name" :border="false"></u-input>
				</view>
			</view>
			<view class="guid">
				<view class="left">
					<span>*</span>身份证号
				</view>
				<view class="input">
					<u-input border="surround" type="idcard" v-model="form.idCard" :border="false"></u-input>
				</view>
			</view>
			<view class="guid noGuidBorder">
				<view class="left">
					<span>*</span>患者电话
				</view>
				<view class="input">
					<u-input border="surround" type="number" v-model="form.phone" :border="false"></u-input>
				</view>
			</view>
			<view class="guid noGuidBorder">
				<view class="left">
					<span>*</span>患者年龄
				</view>
				<view class="input">
					<u-input border="surround" type="number" v-model="form.age" :border="false"></u-input>
				</view>
			</view>
			<view class="guid">
				<view class="left">
					<span>*</span>患者性别
				</view>
				<view class="input">
					<u-input border="surround" type="text" v-model="form.gender" :border="false"></u-input>
				</view>
			</view>
			<view class="guid bettwen">
				<view class="left">
					<span>*</span>您与患者的关系
				</view>
				<view class="input" @click="showRelationshipPopup()">
					{{ getRelationshipText(form.relationship) }}<span>></span>
				</view>
			</view>
		</view>
		
		<!-- 默认就诊人设置 -->
		<view class="set-default">
			<view class="set-default-item">
				<view class="left">
					<view class="title">设为默认就诊人</view>
					<view class="desc">开启后，该患者将作为默认就诊人</view>
				</view>
				<view class="right">
					<u-switch v-model="isDefaultSwitch" active-color="#7D2527" inactive-color="#c0c0c0" @change="toggleDefault"></u-switch>
				</view>
			</view>
		</view>
		
		<view class="btn_con">
			<span @click="submit()">确认添加</span>
		</view>

		<!-- 患者关系选择器 -->
		<u-popup v-model="show" mode="bottom" :closeable="true" @close="close">
			<view class="relationship-popup">
				<view class="popup-title">请选择与患者的关系</view>
				<view class="relationship-list">
					<view 
						v-for="item in relationshipOptions" 
						:key="item.value"
						class="relationship-item"
						@click="selectRelationship(item.value)"
					>
						<text>{{ item.text }}</text>
						<u-icon v-if="form.relationship === item.value" name="checkmark" color="#7D2527" size="20"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { patientAdd } from "@/api/consultation";
export default{
	data(){
		return {
			show: false,
			isDefaultSwitch: true, // 默认就诊人开关状态
			relationshipOptions: [
				{ text: '我是本人', value: '01' },
				{ text: '患者是我朋友', value: '02' },
				{ text: '患者是我亲属', value: '03' },
				{ text: '患者是我父母', value: '04' },
				{ text: '患者是我配偶', value: '05' },
				{ text: '患者是我子女', value: '06' }
			],
			form:{
				mobile:'18655358739',//小程序用户手机号
				name:'',			//患者姓名
				age:'',				//患者年龄
				idCard:'',			//患者身份证
				phone:'',			//患者电话
				gender:'M',			//患者性别 【M：男  F：女】
				relationship:'01',	//与患者关系：【01我是本人、02患者是我朋友、03患者是我亲属、04患者是我父母、05患者是我配偶、06患者是我子女】
				isDefault:1		//是否默认就诊人 【1是 2否】
			}
		}
	},
	methods: {
		// 显示关系选择弹窗
		showRelationshipPopup(){
			this.show = true;
		},
		// 选择关系
		selectRelationship(value){
			this.form.relationship = value;
			this.show = false;
		},
		// 获取关系文本
		getRelationshipText(value){
			const relationship = this.relationshipOptions.find(item => item.value === value);
			return relationship ? relationship.text : '请选择关系';
		},
		// 关闭弹窗
		close(){
			this.show = false;
		},
		// 切换默认就诊人
		toggleDefault(value) {
			this.form.isDefault = value ? 1 : 2;
		},
		// 提交表单
		async submit(){
			let res = await patientAdd(this.form)
			console.log(res)
			if(res.code === 200){
				uni.showToast({
					title:"添加成功",
					icon:"none"
				})
				uni.navigateBack({
					delta: 1
				})
			}else{
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.add_con{
	width:100%;
	height:100%;
	background: #F8F8F8;
	padding: 22rpx 29rpx;
	font-family: PingFang SC, PingFang SC;
	.top_con{
		margin-bottom: 30rpx;
		padding: 10rpx 0;
		.title{
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 9rpx;
		}
		.remark{
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			image{
				width:26rpx;
				height:31rpx;
				margin-right: 12rpx;
			}
		}
	}
	.userInfo_con{
		background: #FFFFFF;
		border-radius: 6rpx;
		margin-bottom: 19rpx;
		padding: 25rpx 31rpx;
		.guid{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E4E4E4;
			display: flex;
			align-items: center;
			.left{
				display: flex;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				width:220rpx;
				span{
					color:#7D2527;
				}
			}
			.input{
				flex:1;
				display: flex;
				justify-content: flex-end;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				span{
					color:#999999;
					margin-left: 10rpx;
				}
			}
		}
		.noGuidBorder{
			border:none;
		}
		.bettwen{
			border:none;
		}
	}
	
	.set-default{
		background: #FFFFFF;
		border-radius: 6rpx;
		padding: 30rpx 31rpx;
		margin-bottom: 19rpx;
		.set-default-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				.title{
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 8rpx;
				}
				.desc{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.right{
				// switch样式由u-switch组件控制
			}
		}
	}
	
	.btn_con{
		width:100%;
		height:88rpx;
		background: linear-gradient(90deg, #7D2527 0%, #AF3A3C 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		span{
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.set{
		background: #FFFFFF;
		border-radius: 6rpx;
		padding: 25rpx 31rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
	}
	.btn_con{
		position: fixed;
		bottom: 40rpx;
		padding: 0 29rpx;
		width:100%;
		left: 0;
		span{
			display: inline-block;
			width:100%;
			background: #7D2527;
			border-radius: 50rpx;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color:#fff;
		}
	}
}

/* 关系选择弹窗样式 */
.relationship-popup {
	padding: 30rpx 0;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	
	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #000000;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	
	.relationship-list {
		.relationship-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;
			font-size: 30rpx;
			color: #333333;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:active {
				background-color: #F5F5F5;
			}
		}
	}
}
</style>